/**
 * Created by Eenie on 2016/12/4.
 */


import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableHighlight,
    StyleSheet,
    ToastAndroid,
    TouchableOpacity,
    TextInput,
    Image,
    Dimensions,
    Button,
    Animated,
    InteractionManager
} from 'react-native';
import Home from './Home';

export default class Splash extends React.Component {

    constructor(props) {
        super(props);



        this.state = {
            splash: require("../images/ic_welcome.jpg"),
            titleOpacityValue: new Animated.Value(0)
        };
    }

    componentDidMount() {
        this.refreshSplash();
        Animated.timing(this.state.titleOpacityValue, {
            toValue: 1,
            duration: 1000,
            delay: 200
        }).start(() => {
            const {navigator} = this.props;
            this.timer = setTimeout(() => {
                InteractionManager.runAfterInteractions(() => {
                    navigator.resetTo({
                        component: Home,
                        name: 'home'
                    });
                });
            }, 2000);
        })
    }

    componentWillUnMount() {
        this.timer&& clearTimeout(this.timer);
    }


    render() {
        return (<View style={styles.main}>
            <Image style={{flex:7,backgroundColor:'#262626'} } animated={true}
                   resizeMode='cover'
                   source={this.state.splash}/>
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Animated.Text style={ {
        fontSize: 40,
        color: '#f5f5f5',
        opacity:this.state.titleOpacityValue

    }}>InLook</Animated.Text>
                <Animated.Text style={{
                fontSize:10,
                color:'#f5f5f5',
                opacity:this.state.titleOpacityValue,
                transform: [{
                translateY: this.state.titleOpacityValue.interpolate({
                inputRange: [0, 1],
                outputRange: [20, 0]
            })
        }],}}>look anything you want</Animated.Text>
            </View>
        </View>);
    }

    refreshSplash() {
        fetch('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1')
            .then(response => response.json())
            .then(responseJson => {
                console.log(responseJson);
                this.setState({
                    splash: {uri: responseJson.results[0].url}
                });
            });
    }

    skipMain() {
        this.props.navigator.resetTo({component: Login});
    };

}

    styles = StyleSheet.create({
        main: {
            flex: 1,
            backgroundColor: '#262626',
        },
        input: {
            flexDirection: 'row',
            backgroundColor: '#333333',
            borderRadius: 10,
            margin: 10,
        },

    });






